<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        *{
            padding: 0;
            margin: 0 ;
        }
        #object {
            width:1200px;
            height: auto;
            overflow: hidden;
            /*border: 2px solid red;*/
            margin: 10px auto;
            float: left;
        }

        #object h3
        {
            display:inline-block;
            /*border: 2px solid red;*/
            margin-left:3px ;
            /*float: left;*/
            margin-bottom: 15px;
        }

        span
        {
            width: 2px;
            height: 20px;
            display: block;
            background-color: blue;
            border: 4px solid blue;
            float: left;
            margin: 0 3px;
        }

        #object .head_end {
               text-decoration: none;
                float: right;
                color: black;
                margin: 3px 0;
        }
        #object ul li
        {
            width: 280px;
            height: auto;
            overflow: hidden;
            /*border: 2px solid red;*/
            float: left;
            background-color: ghostwhite;
            margin:15px 7px;

        }
        #object ul li img
        {
            width: 280px;
            height: auto;
            overflow: hidden;
            /*border: 2px solid red;*/
        }
        #object ul li a {
            text-decoration: none;
            color: black;
        }
        #object ul li .Text1 {
            display: block;
            width: 30px;
            height: auto;
            overflow: hidden;
            background-color: bisque;
            /*border: 2px solid red;*/
            margin: 0 4px;
        }

        #object ul li .Text2 {
            display: block;
            width: 180px;
            height: auto;
            overflow: hidden;
            margin: 2px 4px;
        }

        #object ul li .Text3 {
            display: block;
            width: 180px;
            height: auto;
            overflow: hidden;
            margin: 10px 4px;
            font-size: 13px;
        }

        #object ul li .Text3 {
            display: block;
            width: 180px;
            height: auto;
            overflow: hidden;
            margin: 10px 4px;
            font-size: 13px;
        }
        #object ul li .Text4 {
            font-size: 13px;
            margin: 10px 4px;
        }

    </style>
</head>
<body>

<div id="object">
    <span> </span>
    <h3>精品课程</h3>
    <a class="head_end" href="#">查看更多 》</a>

    <ul>
        <li>
            <a href="#"><img src="./25e7f891d4f415bcfd77eb60450aeba9.jpeg" alt="替换" title="替换"></a>
            <a class="Text1" href="#">Java</a>
            <a class="Text2" href="#">高并发系统设计</a>
            <a class="Text3" href="#">中软国际-JAVA课程体系2.0</a>
            <a class="Text4" href="#">章 61 &nbsp;&nbsp;|&nbsp;&nbsp; 节 116 &nbsp;&nbsp;｜&nbsp;&nbsp;人 0 &nbsp;&nbsp; </a>
        </li>

        <li>
            <a href="#"><img src="./25e7f891d4f415bcfd77eb60450aeba9.jpeg" alt="替换" title="替换"></a>
            <a class="Text1" href="#">Java</a>
            <a class="Text2" href="#">高并发系统设计</a>
            <a class="Text3" href="#">中软国际-JAVA课程体系2.0</a>
            <a class="Text4" href="#">章 61 &nbsp;&nbsp;|&nbsp;&nbsp; 节 116 &nbsp;&nbsp;｜&nbsp;&nbsp;人 0 &nbsp;&nbsp; </a>
        </li>

        <li>
            <a href="#"><img src="./25e7f891d4f415bcfd77eb60450aeba9.jpeg" alt="替换" title="替换"></a>
            <a class="Text1" href="#">Java</a>
            <a class="Text2" href="#">高并发系统设计</a>
            <a class="Text3" href="#">中软国际-JAVA课程体系2.0</a>
            <a class="Text4" href="#">章 61 &nbsp;&nbsp;|&nbsp;&nbsp; 节 116 &nbsp;&nbsp;｜&nbsp;&nbsp;人 0 &nbsp;&nbsp; </a>
        </li>

        <li>
            <a href="#"><img src="./25e7f891d4f415bcfd77eb60450aeba9.jpeg" alt="替换" title="替换"></a>
            <a class="Text1" href="#">Java</a>
            <a class="Text2" href="#">高并发系统设计</a>
            <a class="Text3" href="#">中软国际-JAVA课程体系2.0</a>
            <a class="Text4" href="#">章 61 &nbsp;&nbsp;|&nbsp;&nbsp; 节 116 &nbsp;&nbsp;｜&nbsp;&nbsp;人 0 &nbsp;&nbsp; </a>
        </li>

        <li>
            <a href="#"><img src="./25e7f891d4f415bcfd77eb60450aeba9.jpeg" alt="替换" title="替换"></a>
            <a class="Text1" href="#">Java</a>
            <a class="Text2" href="#">高并发系统设计</a>
            <a class="Text3" href="#">中软国际-JAVA课程体系2.0</a>
            <a class="Text4" href="#">章 61 &nbsp;&nbsp;|&nbsp;&nbsp; 节 116 &nbsp;&nbsp;｜&nbsp;&nbsp;人 0 &nbsp;&nbsp; </a>
        </li>

        <li>
            <a href="#"><img src="./25e7f891d4f415bcfd77eb60450aeba9.jpeg" alt="替换" title="替换"></a>
            <a class="Text1" href="#">Java</a>
            <a class="Text2" href="#">高并发系统设计</a>
            <a class="Text3" href="#">中软国际-JAVA课程体系2.0</a>
            <a class="Text4" href="#">章 61 &nbsp;&nbsp;|&nbsp;&nbsp; 节 116 &nbsp;&nbsp;｜&nbsp;&nbsp;人 0 &nbsp;&nbsp; </a>
        </li>

        <li>
            <a href="#"><img src="./25e7f891d4f415bcfd77eb60450aeba9.jpeg" alt="替换" title="替换"></a>
            <a class="Text1" href="#">Java</a>
            <a class="Text2" href="#">高并发系统设计</a>
            <a class="Text3" href="#">中软国际-JAVA课程体系2.0</a>
            <a class="Text4" href="#">章 61 &nbsp;&nbsp;|&nbsp;&nbsp; 节 116 &nbsp;&nbsp;｜&nbsp;&nbsp;人 0 &nbsp;&nbsp; </a>
        </li>

        <li>
            <a href="#"><img src="./25e7f891d4f415bcfd77eb60450aeba9.jpeg" alt="替换" title="替换"></a>
            <a class="Text1" href="#">Java</a>
            <a class="Text2" href="#">高并发系统设计</a>
            <a class="Text3" href="#">中软国际-JAVA课程体系2.0</a>
            <a class="Text4" href="#">章 61 &nbsp;&nbsp;|&nbsp;&nbsp; 节 116 &nbsp;&nbsp;｜&nbsp;&nbsp;人 0 &nbsp;&nbsp; </a>
        </li>
    </ul>
</div>

</body>
</html>
